<!--自行封装树形table,多级-->
<template>
    <el-table border v-loading="loading" element-loading-text="正在查询中。。。" :data="formatData" :row-style="showRow" v-bind="$attrs">
        <el-table-column v-if="columns.length===0" width="50">
            <template slot-scope="scope">
                <span v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
                <span class="tree-ctrl" v-if="iconShow(0,scope.row)" @click="toggleExpanded(scope.$index)">
                    <i v-if="!scope.row._expanded" class="el-icon-arrow-right"></i>
                    <i v-else class="el-icon-arrow-down"></i>
                </span>
            </template>
        </el-table-column>
        <el-table-column v-else v-for="(column, index) in columns" :key="column.value" :label="column.text" :width="column.width">
            <template slot-scope="scope">
                <span v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
                <span class="tree-ctrl" v-if="iconShow(index,scope.row)" @click="toggleExpanded(scope.$index)">
                    <i v-if="!scope.row._expanded" class="el-icon-arrow-right"></i>
                    <i v-else class="el-icon-arrow-down"></i>
                </span>
                {{scope.row[column.value]}}
            </template>
        </el-table-column>
        <slot></slot>
    </el-table>
</template>

<script>
    import {treeToArray} from '../../utils/index.js'
    export default {
        name:'treeTable',
        props:{
            data: {
                type: [Array, Object],
                required: true
            },
            columns: {
                type: Array,
                default: () => []
            },
            evalFunc: Function,
            evalArgs: Array,
            expandAll: {
                type: Boolean,
                default: false
            },
            loading:{
                type: Boolean,
                default: false
            }
        },
        data(){
            return{
                menu:[]
            }
        },
        created() {

        },
        computed: {
            // 格式化数据源
            formatData: function() {
                let tmp
                if (!Array.isArray(this.data)) {
                    tmp = [this.data]
                } else {
                    tmp = this.data
                }
                const func = this.evalFunc || treeToArray
                const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]
                return func.apply(null, args)
            }
        },
        methods:{
            showRow: function(row) {
                const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true)
                row.row._show = show
                let showJson={}
                if (show){
                    showJson.animation="treeTableShow 1s"
                    showJson["-webkit-animation"]="treeTableShow 1s";
                }else {
                    showJson.display='none';
                }
                return showJson
            },
            // 图标显示
            iconShow(index, record) {
                return (index === 0 && record.children && record.children.length > 0)
            },
            // 切换下级是否展开
            toggleExpanded: function(trIndex) {
                console.log(trIndex)
                const record = this.formatData[trIndex]
                console.log(record)
                record._expanded = !record._expanded
            },
        }
    }
</script>

<style rel="stylesheet/css">
    @keyframes treeTableShow {
        from {opacity: 0;}
        to {opacity: 1;}
    }
    @-webkit-keyframes treeTableShow {
        from {opacity: 0;}
        to {opacity: 1;}
    }
</style>


<style lang="scss" rel="stylesheet/scss" scoped>
    $color-blue: #2196F3;
    $space-width: 18px;
    .ms-tree-space {
        position: relative;
        top: 1px;
        display: inline-block;
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        width: $space-width;
        height: 14px;
        &::before {
            content: ""
        }
    }
    .processContainer{
        width: 100%;
        height: 100%;
    }
    table td {
        line-height: 26px;
    }

    .tree-ctrl{
        position: relative;
        cursor: pointer;
        text-align: center;
        margin-left: -$space-width;
    }
</style>
